<template>
  <div class="_boxes-item-container" :class="{'_mobile': isMobile}">
    <box-container
      class="_boxes-item-wrapper"
      v-for="(item, idx) in boxes"
      :key="item?.id || idx"
      @click="onViewBoxItem(item)"
    >
      <template v-if="!props.loading">
        <div class="_boxes-item">
          <div class="_boxes-image-warpper">
            <img :src="item?.image" />
          </div>
          <price-btn :price="Number(item?.spin_amount || 0)" />
        </div>
      </template>
      <template v-else>
        <div class="flex items-center justify-center h-full w-full">
          <loading class="!w-2.5rem" :track-width="6" />
        </div>
      </template>
    </box-container>
  </div>
</template>

<script lang="tsx" setup>
import { onBuriedPoint } from "@/api/user";
import BoxContainer from "@/components/BoxContainer/box-container.vue";
import Loading from "@/components/Loading/loading.vue";
import PriceBtn from "@/components/PriceBtn/price-btn.vue";
import { useMedia } from "@/hooks/useMedia";

import { hotBoxesProps } from "./hotBoxes";

const props = defineProps(hotBoxesProps);

const router = useRouter();
const isMobile = useMedia();

const boxes = computed(() => {
  if (props.loading) {
    return new Array(5).fill(0);
  }
  return props.boxes;
});

function onViewBoxItem(box: API.Home.HotBoxItem) {
  router.push(`/boxs/${box.id}`);
  onBuriedPoint({
    page_name: "首页",
    action: "点击按钮",
    button_name: "盲盒详情",
    box_id: box.id + "",
  });
}
</script>

<style lang="less" scoped>
._boxes-item-container {
  @apply flex items-stretch;
  gap: 1.13rem;
  ._boxes-item-wrapper {
    @apply flex-1 w-0;
    ._boxes-item {
      @apply flex flex-col items-center h-full;
      gap: 1rem;
      ._boxes-image-warpper {
        @apply flex-1 h-0 w-full;
        img {
          @apply h-full w-full;
          object-fit: fill;
        }
      }
    }
  }
}
</style>

<style lang="less" scoped>
._boxes-item-container {
  @apply flex-wrap;
  &._mobile {
    gap: 0.81rem;
    ._boxes-item-wrapper {
      flex: auto;
      width: calc((100% - 0.81rem) / 2);
    }
  }
}
</style>
